<template>
  <div>
    <div class="mokuai1">
      <h3 class>计算属性:</h3>
      <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>翻转字符串: "{{ reversedMessage }}"</p>
      </div>
    </div>
    <div class="mokuai1">
      <h3 class>侦听属性:</h3>
      <div id="demo">{{ fullName }}</div>
    </div>
    <div class="mokuai1">
      <h3 class>计算属性:</h3>
      <div id="demo">{{ fullNamea }}</div>
    </div>
    <div class="mokuai1">
      <h3 class>当需要在数据变化时执行异步或开销较大的操作时:watch</h3>
      <div id="watch-example">
        <p>
          Ask a yes/no question:
          <input v-model="question" />
        </p>
        <p>{{ answer }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index2",
  data() {
    return {
      message: "Hello",
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar",
      question: "",
      answer: "I cannot give you an answer until you ask a question!"
    };
  },
  //   计算属性
  computed: {
    // fullNamea 是上面的声明了一个计算属性 reversedMessage
    reversedMessage() {
      // `this` 指向 vm 实例
      //   return this.message.split("").reverse().join("");
      //   console.log(vm.reversedMessage); // => 'olleH'
    },
    // fullNamea 是上面的声明了一个计算属性 fullNamea  他同下面的侦听器
    fullNamea() {
      return this.firstName + " " + this.lastName;
    },
    // 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
    fullNamea: {
      // getter
      get: function() {
        return this.firstName + " " + this.lastName;
      },
      // setter
      set: function(newValue) {
        var names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  },
  // 侦听器
  watch: {
    firstName: function(val) {
      this.fullName = val + " " + this.lastName;
    },
    lastName: function(val) {
      this.fullName = this.firstName + " " + val;
    },
    // 案例
    // 如果 `question` 发生改变，这个函数就会运行
    question(newQuestion, oldQuestion) {
      this.answer = "输入中";
      console.log(newQuestion)
      console.log(oldQuestion)
    //   this.debouncedGetAnswer(); //这是限制限制操作频率的函数  这里有问题
    },
    created: function() {
      // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
      // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
      // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
      // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
      // 请参考：https://lodash.com/docs#debounce
      this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
    }
  },
  methods: {
    //  500秒执行下面的函数方法
    getAnswer() {
      if (this.question.indexOf("?") === -1) {
        this.answer = "Questions usually contain a question mark. ;-)";
        return;
      }
      this.answer = "Thinking...";
      var vm = this;// this重定向
      axios
        .get("https://yesno.wtf/api")
        .then(response=> {
          vm.answer = _.capitalize(response.data.answer);
        })
        .catch(error=>{
          vm.answer = "Error! Could not reach the API. " + error;
        });
    }
  }
};
</script>

<style>
.mokuai1 {
  h3 {
    font-size: 12px;
  }
}
</style>